<template>
  <div>
    <form @submit.prevent="handleLogin">
      <input v-model="form.username" placeholder="用户名">
      <input v-model="form.password" type="password" placeholder="密码">
      <button :disabled="loading">{{ loading ? '登录中...' : '登录' }}</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '@/api/modules/auth'
import { setToken, setUserInfo } from '@/utils/storage'
import { showMessage } from '@/utils/message'

const router = useRouter()
const loading = ref(false)

const form = ref({
  username: '',
  password: ''
})

const handleLogin = async () => {
  try {
    loading.value = true
    
    // 调用封装的 API
    const response = await login(form.value)
    
    // 保存 token 和用户信息
    setToken(response.token)
    setUserInfo(response.user)
    
    showMessage('登录成功', 'success')
    router.push('/dashboard')
    
  } catch (error) {
    console.error('登录失败:', error)
    showMessage(error.message || '登录失败', 'error')
  } finally {
    loading.value = false
  }
}
</script>